// 构造Tab函数
function Tab(el,options = {}){
    // 存数据
    this.el = document.querySelector(el)
    this.options = options
    // 写功能
    this.init();//将功能细分到原型上调用

}

Tab.prototype.init = function(){
    this.resetOptions()
    this.titleOver()
}

Tab.prototype.resetOptions = function(){
    this.options.active = this.options.active ||'#fff'
}

Tab.prototype.titleOver = function(){
    // 获取所有标题
    let titleObjs = this.el.querySelectorAll("ul li")
    // 遍历
    titleObjs.forEach((item,i)=>{
        // 绑定鼠标移入事件
        item.onmouseover = () =>{
            // 找标题中带有active的，清除
            this.el.querySelector('ul li.active').className = ''
            // 给当前移入的加上
            item.className = 'active'

            // 字体颜色配置
            this.el.querySelectorAll('ul li').forEach(item => {
                // 设置默认颜色
                item.style.color = '#fff'
            })
            // 换成被选中的颜色
            item.style.color = this.options.active
            // 同步内容
            this.changeContent(i)
        };
    });
}

Tab.prototype.changeContent = function(i){
    this.el.querySelector('ol li.active').className = ''
    this.el.querySelector(`ol li:nth-of-type(${i+1})`).className = 'active'
}

export default Tab